﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <meta charset="utf-8">
    <title>btable</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
	
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/btable.css" />
	<link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
    $(document).ready(function() {
		var url = "<%=request.getContextPath()%>/dingdan.do";
		$.post(
			//路径
			url,
			$("form").serialize(),
			//回调函数
			function(data) {
				//1、解析并显示员工数据
				build_emps_table(data);
				//2、解析并显示分页信息
				build_page_info(data);
				//3、解析显示分页条数据
				build_page_nav(data);
			},
			//返回类型
			"json"
		);
		function build_emps_table(data){
			$("#car_table tbody").empty();
			var emps = data.list;
			$.each(emps,function(index,item){
				var oidTd= $("<td></td>").append(item.oid);
				var unamename=$("<td></td>").append(item.unamename);
				var cname=$("<td></td>").append(item.cname);
				var ccard=$("<td></td>").append(item.ccard);
				var cmoney=$("<td></td>").append(item.cmoney);
				var ostartime=$("<td></td>").append(item.ostartime);
				var obacktime=$("<td></td>").append(item.obacktime);
				var otime=$("<td></td>").append(item.otime);
				var omoney=$("<td></td>").append(item.omoney);
				var zotime=$("<td></td>").append(item.zotime);
				var zomoney=$("<td></td>").append(item.zomoney);
				$("<tr></tr>")
				.append(oidTd)
				.append(unamename)
				.append(cname)
				.append(ccard)
				.append(cmoney)
				.append(ostartime)
				.append(obacktime)
				.append(otime)
				.append(omoney)
				.append(zotime)
				.append(zomoney)
				.appendTo("#car_table tbody");
			});
		}
		//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前"+result.pageNum+"页,总"+
					result.pages+"页,总"+
					result.total+"条记录");
			totalRecord = result.total;
			currentPage = result.pageNum;
		}
		//解析显示分页条，点击分页要能去下一页....
		function build_page_nav(result){
			//page_nav_area
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if(result.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.pageNum -1);
				});
			}
			
			
			
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if(result.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.pages);
				});
			}
			
			
			
			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			//1,2，3遍历给ul中添加页码提示
			$.each(result.navigatepageNums,function(index,item){
				
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		//清空表单样式及内容
		function reset_form(ele){
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			$(ele).find(".help-block").text("");
		}
	});
    
    </script>
</head>

<body style=" background-color: gainsboro;">

    <div style="margin:0px; background-color: white; margin:0 10px;">
        <div id="content" style="width: 100%;height: 533px;">
			<!-- 搭建显示页面 -->
		<div class="container">
	
		<div class="row">
			<h1 align="center">个人订单记录</h1>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="car_table">
					<thead>
					<tr>
						<th>#</th>
						<th>用户名</th>
						<th>车辆名称</th>
						<th>车牌号</th>
						<th>收费标准（/天）</th>
						<th>租车时间</th>
						<th>还车时间</th>
						<th>租车时长</th>
						<th>费用</th>
						<th>真实租车时长</th>
						<th>真实费用</th>
					</tr>
					</thead>
					
					<tbody>
					
					</tbody>
				</table>
			</div>
			</div>
			<!-- 显示分页信息 -->
			<div class="row">
				<!--分页文字信息  -->
				<div class="col-md-6" id="page_info_area"></div>
				<!-- 分页条信息 -->
				<div class="col-md-6" id="page_nav_area"></div>
			</div>
        </div>
		</div>
    </div>
	
</body>

</html>